<template>
  <div class="login_container">
    <!-- <img src="../../assets/images/background.jpg" alt=""> -->
     <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login-from" :model="loginForm" :rules="rules" ref="loginFormRef" >
          <h1>Hello</h1>
          <h2 class="title">欢迎来到后台管理平台</h2>
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
           <el-icon><Search /></el-icon>
            <el-input :prefix-icon="Lock" type="password" v-model="loginForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" class="login-btn" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
     </el-row>
  </div>
</template>

<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import { ElNotification, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
// 引入获取当前时间的函数
import { getTime } from '@/utils/time'
// 引入用户相关小仓库
import useUserStore from '@/store/modules/user'
let useStore = useUserStore()
let $router = useRouter()
// 定义用户，密码数据
interface RuleForm {
  username: string
  password: string
}
const loginForm = reactive<RuleForm>({
  username: '',
  password: '',
})
// 表单校验
const loginFormRef = ref()
const rules = reactive({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'change' },
    { min: 5, max: 10, message: '账号长度至少6位', trigger: 'change' },
  ],
  password: [
     { required: true, message: '密码不能为空', trigger: 'change' }
  ]
})
const loading = ref(false)
// 登录按钮
const login = () => {
  // try {  // 可以使用.then() 也可使用try{} catch(error){}
  //   // 保证登录成功
  //   // 发送请求
  //   await useStore.userLogin(loginForm)
  //   $router.push('/')

  // } catch (error) {

  // }
  // 开始加载
  loading.value = true
  useStore.userLogin(loginForm).then((res) => {
    // console.log(res)
    
    if (res.code == 200) {
      // 结束加载
      loading.value = false
      ElNotification({
        title: `HI,${getTime()}好`,
        message: '登录成功',
        type: 'success',
      })
      // 编程式导航跳转到首页
      $router.push('/')
    } else {
      // 结束加载
      loading.value = false
      ElNotification({
        // title: '登录成功',
        message: res,
        type: 'error',
      })
    }
  })
  
}
</script>

<style scoped>
.login_container{
  width: 100%;
  height: 100vh;
  background: url('../../assets/images/background.jpg') no-repeat;
  background-size: cover;
  
  .login-from{
    position: absolute;
    top:30vh;
    width:500px;
    height: 300px;
    padding: 20px;
    background: url('../../assets/images/login_form.png') no-repeat;
    background-size: cover;
    border-radius: 20px;
    h1{color: #fff; font-size: 40px;}
    .title{
      color: #fff;
      padding: 15px 0 30px 0;
    }
  }
  .login-btn{
    width: 100%; color: #fff;
  }
}
</style>
